//引入normalize
@import "normalize.scss";
//引入base
@import "base.scss";
body{
    height: 100%;
    background:url('../images/zhujiemian/组50_22.png');
    // background-size: 100%;
    // background-size:cover;
    background-size:(1080/54)*1rem 43.555556rem;
}
.person_info{
  width: 100%;
  position: relative;
  .bg{
    width: (971/54)*1rem;
    height: (1165/54)*1rem;
    position: absolute;
    top: (60/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff0c4;
    border-radius: (45/54)*1rem;
    .head{
         width: (184/54)*1rem;
         height: (184/54)*1rem;
         position: absolute;
         top: (24/54)*1rem;
         background-color: skyblue;
         border-radius: 50%;
         left: 50%;
         transform: translateX(-50%);
         border: (10/54)*1rem solid white;
       }
    .dartboard{
      width: (636/54)*1rem;
      height: (636/54)*1rem;
      position: absolute;
      top: (266/54)*1rem;
      left: 50%;
      transform: translateX(-50%);
      background:url('../images/person_info/组13.png') no-repeat center / 100% 100%;
      canvas{
        //border: 1px solid blue;
      }
    }
    .zi{
      font-size: (38/54)*1rem;
      position: absolute;
      color: #514666;
    }
    .literature{
      top: (221/54)*1rem;
      left: 50%;
      transform: translateX(-50%);
    }
    .arts{
      top: (405/54)*1rem;
      left: (119/54)*1rem;
    }
    .popular{
      top: (405/54)*1rem;
      right: (119/54)*1rem;
    }
    .science{
      top: (727/54)*1rem;
      left: (119/54)*1rem;
    }
    .entertainment{
      top: (727/54)*1rem;
      right: (119/54)*1rem;
    }
    .life{
      top: (906/54)*1rem;
      left: 50%;
      transform: translateX(-50%);
    }
    .comment1{
        font-size: (38/54)*1rem;
          position: absolute;
          color: #514666;
        bottom: (112/54)*1rem;
          left: 50%;
          transform: translateX(-50%);
    }
    .comment2{
            font-size: (38/54)*1rem;
              position: absolute;
              color: #514666;
            bottom: (53/54)*1rem;
              left: 50%;
              transform: translateX(-50%);
        }
  }
  .detailed{
    width: (787/54)*1rem;
    height: (243/54)*1rem;
    position: absolute;
    top: ((37+685+96+323+49)/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    .zi{
      color: #514666;
      font-size:(33/54)*1rem;
      position: absolute;
      left: (31/54)*1rem;
      top: 50%;
      transform: translateY(-50%);
      font-weight: 800;
    }
    .lf{
      height: (63/54)*1rem;
      width: (374/54)*1rem;
      border-radius: (374/54)*1rem;
      background-color: #ffc000;
      margin-bottom: (29/54)*1rem;
      position: absolute;
      left: 0;
    }
    .rh{
      height: (63/54)*1rem;
      width: (374/54)*1rem;
      border-radius: (374/54)*1rem;
      background-color: #ffc000;
      margin-bottom: (29/54)*1rem;
      position: absolute;
      right: 0;
    }
    .winnig_rate{
      top: ((29+63)/54)*1rem;
    }
    .experience{
      top: ((29+63+29+63)/54)*1rem;
    }
    .total{
      top: ((29+63)/54)*1rem;
    }
    .wins{
      top: ((29+63+29+63)/54)*1rem;
    }
  }
  .share_f{
        top:((1197+60)/54)*1rem;
        height: (134/54)*1rem;
        width: (417/54)*1rem;
        position: absolute;
        left: (91/54)*1rem;
        border-radius: (31/54)*1rem;
        border:(7/54)*1rem solid white;
    .ico{
        width: (74/54)*1rem;
          height: (72/54)*1rem;
          position: absolute;
          top: (27/54)*1rem;
          left: (48/54)*1rem;
          background:url('../images/person_info/组500.png') no-repeat center / 100% 100%;
    }
    .zi{
      color: white;
      width: 100%;
      font-size:(45/54)*1rem;
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      left:(137/54)*1rem;
      font-weight: 800;
}
  }
  .share_f_d{
          top:((1197+60)/54)*1rem;
          height: (134/54)*1rem;
          width: (417/54)*1rem;
          position: absolute;
          right: (91/54)*1rem;
          border-radius: (31/54)*1rem;
          border:(7/54)*1rem solid white;
      .ico{
          width: (74/54)*1rem;
            height: (72/54)*1rem;
            position: absolute;
            top: (27/54)*1rem;
            left: (48/54)*1rem;
            background:url('../images/person_info/组501.png') no-repeat center / 100% 100%;
      }
      .zi{
        color: white;
        width: 100%;
        font-size:(45/54)*1rem;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        left:(137/54)*1rem;
        font-weight: 800;
  }
    }
  .share{
    top:((1428+60)/54)*1rem;
    height: (150/54)*1rem;
    width: (576/54)*1rem;
    background-color: #b0d52d;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: (27/54)*1rem;
    .ico{
      width: (74/54)*1rem;
      height: (72/54)*1rem;
      position: absolute;
      top: (7/54)*1rem;
      left: 50%;
      transform: translateX(-50%);
      background:url('../images/person_info/组50.png') no-repeat center / 100% 100%;
    }
    .zi{
      color: #4e8015;
      width: 100%;
      font-size:(56/54)*1rem;
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      text-align: center;
      font-weight: 800;
    }
  }
  .tip{
    width: 100%;
    font-size: (28/54)*1rem;
    color: white;
    text-align: center;
    position: absolute;
    top:((46+323+49+1102+161)/54)*1rem;
    span{
      display: inline-block;
      background:url('../images/result/money.png') no-repeat center / 100% 100%;
      width: (68/54)*1rem;
      height: (41/54)*1rem;
      position: relative;
      top:0.144444rem;
    }
  }
}